<template>
	<uiwu-popup v-model="showModel">
		<view class="uiwu-popup uiwu-flex-center" @tap.stop>
			<view class="uiwu-popup-box">
				<view class="title">
					温馨提示
				</view>	
				<view class="content">
					<slot>提示内容</slot>
				</view>
				<view class="btn uiwu-flex-space">
					<text @tap="cancel"></text>
					<text @tap="confirm"></text>
				</view>
			</view>	
		</view>	
	</uiwu-popup>
</template>

<script lang="ts" setup>
	/**
	 * @event {Function()} confirm 确定回调 
	 */
	import { ref } from "vue";
	const emits = defineEmits(['confirm','update:modelValue'])
	const showModel = ref<boolean>(true)
	const confirm = () => {
		showModel.value = false
		emits('confirm')
		emits('update:modelValue', false);
	}
	const cancel = () => {
		showModel.value = false
		emits('update:modelValue', false);
	}
</script>

<style lang="scss">
	.uiwu-popup{
		width: 100%;
		height: 100%;
		&-box{
			width: 576rpx;
			height: 528rpx;
			background: url('../../static/popupbg.png') no-repeat 0 0;
			background-size: 100% 100%;
			padding-top: 144rpx;
			.title{
				font-size: 40rpx;
				font-weight: 800;
				color: #231815;
				text-align: center;
			}
			.content{
				padding: 0 123rpx 0 107rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #444444;
				height: 88rpx;
				margin-top: 32rpx;
			}
			.btn{
				margin-top: 50rpx;
				padding: 0 53rpx 0 37rpx;
				text{
					position: relative;
					width: 224rpx;
					height: 72rpx;
					&:nth-child(1){
						font-size: 32rpx;
						font-weight: bold;
						color: #231815;
						&::before{
							content: "取消";
							width: 224rpx;
							height: 72rpx;
							background: #FFFFFF;
							border-radius: 36rpx;
							border: 3rpx solid #231815;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 9;
							text-align: center;
							line-height: 72rpx;
						}
						&::after{
							content: "";
							width: 224rpx;
							height: 72rpx;
							background: #FFFFFF;
							border-radius: 36rpx;
							border: 3rpx solid #231815;
							position: absolute;
							left: 4rpx;
							top: 9rpx;
						}
					}
					&:nth-child(2){
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
						&::before{
							content: "确认";
							width: 224rpx;
							height: 72rpx;
							background: #EF821E;
							border-radius: 36rpx;
							border: 3rpx solid #231815;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 9;
							text-align: center;
							line-height: 72rpx;
						}
						&::after{
							content: "";
							width: 224rpx;
							height: 72rpx;
							background: #FAC500;
							border-radius: 36rpx;
							border: 3rpx solid #231815;
							position: absolute;
							left: 4rpx;
							top: 9rpx;
						}
					}
				}
			}
		}
	}
</style>